<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="模板名称" prop="name">
                <el-input
                    v-model="queryParams.name"
                    placeholder="请输入模板名称"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
  
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
  
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column label="模板名称" prop="typeName" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="模板id" prop="roleId" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="备注" prop="roleId" width="130"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-view"
                    @click="handlePreview(scope.row)"
                    v-hasPermi="['system:role:remove']"
                    >预览
                </el-button>
            </template>
            </el-table-column>
        </el-table>
  
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
  
      
    </div>
</template>
  
<script>
import { listRole, } from '@/api/system/role'

export default {
    name: 'noticeTemplete',
    dicts: [],
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 信调表格数据
            dataList: [],
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                name: undefined,
                status: undefined
            },


        }
    },
    created() {
    //   this.getList()
    },
    methods: {
        /** 查询角色列表 */
        getList() {
            this.loading = true
            listRole(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
                this.dataList = response.rows
                this.total = response.total
                this.loading = false
            }
            )
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.roleId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        /** 预览按钮操作 */
        handlePreview(row) {

        },
      

    }
}
</script>